<!-- created:2021/12/24 17:54 By AdinZ -->
<template>
  <div class="dialog">
    <el-row :gutter="20">
      <el-col :span="form.og=='USER'?12:24">
        <el-descriptions :column="3" border>
          <el-descriptions-item label-class-name="description-label">
            <template #label>
              <div class="cell-item">
                消息标题
              </div>
            </template>
            <el-input v-model="form.title"/>
          </el-descriptions-item>
          <el-descriptions-item label-class-name="description-label">
            <template #label>
              <div class="cell-item">
                消息类型
              </div>
            </template>
            <el-select v-model="form.type" placeholder="请选择">
              <el-option value="NEW_VERSION" label="新版本"/>
              <el-option value="NOTIFY" label="通知消息"/>
              <el-option value="WARN" label="警告消息"/>
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item label-class-name="description-label">
            <template #label>
              <div class="cell-item">
                定向类型
              </div>
            </template>
            <el-select v-model="form.og" placeholder="请选择">
              <el-option value="ALL" label="全部会员"/>
              <el-option value="USER" label="部分用户"/>
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item label-class-name="description-label">
            <template #label>
              <div class="cell-item">
                消息内容
              </div>
            </template>
            <div class="rich-text" style="height: 450px">
              <RichText v-model="form.body"/>
            </div>
          </el-descriptions-item>
        </el-descriptions>
        <div v-if="modifyStatus" style="padding: 15px;text-align: center">
          <el-button type="primary" @click="handlerSubmit">提交</el-button>
          <el-button @click="$emit('close')">取消</el-button>
        </div>
      </el-col>
      <el-col :span="12" v-if="form.og=='USER'">
        <el-button @click="handleShowUser" type="success" icon="Plus" circle size="small"/>

        <el-table fit border highlight-current-row :data="list" style="width: 100%">-->
          <el-table-column label="#" width="60" align="center">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="头像" width="90" align="center">
            <template #default="scope">
              <el-avatar :src="scope.row.avatar"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column prop="mobile" label="手机号" width="180" align="center"/>
          <el-table-column prop="nickname" label="会员昵称" width="180" align="center"/>
          <el-table-column label="删除" width="80" align="center">
            <template #default="scope">
              <el-button type="danger" icon="Delete" circle size="small"
                         @click="list=$api.deleteArray(list,scope.$index)"/>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <user-select v-model:show="user.show" v-model:result="user.result"/>
  </div>
</template>

<script>

import RichText from "@/components/RichText/index.vue";
import UserSelect from "@/components/UserSelect/index.vue";

export default {
  name: "NotifyEdit",
  components: {UserSelect, RichText},
  props: {
    data: Object,
    modify: Boolean
  },
  computed: {
    modifyStatus() {
      return this.modify;
    }
  },

  data() {
    return {
      form: {},
      list: [],
      user: {show: false, result: Function}
    }
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      let id = this.data.id;
      if (id > 0) {
        this.$api.get(`/api/manage/notify/${id}`).then(res => {
          this.form = res.data;
          if (res.data.users && res.data.users.length > 0) {
            this.form['og'] = 'USER'
            this.list = res.data.users
          } else this.list = []
        })
      }
    },
    handleShowUser() {
      this.user.show = true;
      this.user.result = (e) => {
        for (let i = 0; i < e.length; i++) {
          if (this.list.filter(x => x.id === e[i].id).length == 0) {
            this.list.push(e[i])
          }
        }
      }
    },
    handlerSubmit() {
      if (this.form.og == 'ALL')
        this.list = []
      this.form.users = this.list
      this.$api.post(`/api/manage/notify/${this.form.id ? 'edit' : 'add'}`, {}, this.form).then(() => {
        this.$emit('success')
      })
    }
  }
}
</script>

<style scoped lang="scss">
.notify_edit {

}
</style>
